<template>
    <div class="action-main">
        <ul>
            <li @tap="reflash">
                <i class="reflash-icon"></i>
            </li>
            <li @tap="openVest">
                <i class="vest-icon"></i>
            </li>
            <li @tap="openUserManage">
                <i class="user-icon"></i>
            </li>
        </ul>
        <vest ref="vest" />
        <userManage ref="userManage" />
    </div>
</template>

<script>

import vest from '../vest'
import userManage from '../ userManage'
export default {
    components: {
        vest,
        userManage
    },
    methods: {
        reflash() {
            window.location.reload();
        },
        openVest() {
            this.$refs.vest.vestFlag = false
            this.$refs.vest.show = true
        },
        openUserManage() {
            this.$refs.userManage.show = true
        }
    },
}
</script>

<style lang="scss" scoped>
.action-main {
    position: fixed;
    bottom: 286px;
    right: 16px;
    z-index: 999;

    ul {
        display: flex;
        flex-direction: column;

        li {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.20);
            overflow: hidden;
            margin-bottom: 14px;
            color: #fff;
        }
    }


}
</style>